<template>
    <div>
        <div class="page">
            <el-row class="part1_box">
                <el-row style="margin:20px;">
                    <el-col :span="24" :xs="24">
                        <el-form :model="queryParams"  ref="queryForm" :inline="true"  label-width="80px">
                            <el-form-item label="用户ID"  >
                                <el-input v-model="queryParams.userId" placeholder="请输入用户ID"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号"  >
                                <el-autocomplete v-model="queryParams.cellphone" placeholder="请输入手机号"
                                :fetch-suggestions="querySearchAsync"
                                @select="handleSelect"></el-autocomplete>
                            </el-form-item>
                            <el-form-item label="角色">
                                <el-select v-model="queryParams.roleLevel">
                                    <el-option label="会员" value="2-0"></el-option>
                                    <el-option label="经理" value="2-1741"></el-option>
                                    <el-option label="经销商" value="2-1742"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="网体级别">
                                <el-select v-model="queryParams.fttLevel">
                                    <el-option label="F0" value="F0"></el-option>
                                    <el-option label="F1" value="F1"></el-option>
                                    <el-option label="F2" value="F2"></el-option>
                                    <el-option label="F3" value="F3"></el-option>
                                    <el-option label="F4" value="F4"></el-option>
                                    <el-option label="F5" value="F5"></el-option>
                                    <el-option label="F6" value="F6"></el-option>
                                    <el-option label="F7" value="F7"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="邀请人ID">
                                <el-input v-model="queryParams.referralParentUserId" placeholder="请输入邀请人ID"></el-input>
                            </el-form-item>
                            <el-form-item label="邀请码" >
                                <el-input v-model="queryParams.referralCode" placeholder="请输入邀请码"></el-input>
                            </el-form-item>
                            <el-form-item label="归辅导ID">
                                <el-input v-model="queryParams.parentUserId" placeholder="请输入归属辅导员ID"></el-input>
                            </el-form-item>
                            <el-form-item label="中军卡">
                                <el-input v-model="queryParams.cardzCellphone" placeholder="请输入中军卡"></el-input>
                            </el-form-item>
                            <el-form-item label="卡状态">
                               <el-select v-model="queryParams.cardzState">
                                    <el-option label="等待" value="pending"></el-option>
                                    <el-option label="成功" value="success"></el-option>
                                    <el-option label="失败" value="failure"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery(queryParams)">搜索</el-button>
                            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                        </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </el-row>
            
            <el-row class="part1_box">
                <el-row :gutter="10" style="margin:20px;">
                    <el-col :span='2'>
                        <el-button type="primary" plain icon='el-icon-plus' size='mini' @click='handleAdd'>新增</el-button>
                    </el-col>
                    <el-col :span='2'>
                        <el-button type="warning" plain icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleExport">导出</el-button>
                    </el-col>
                </el-row>
                <el-row style="margin:20px;">
                    
                    <el-table v-loading='loading' :data="list">
                        <el-table-column label="ID" prop='id'/>
                        <el-table-column label="用户ID" prop='userId'/>
                        <el-table-column label="手机号" prop='cellphone'/>
                        <el-table-column label="姓名" prop='idname'/>
                        <el-table-column label="角色" prop='roleLevel'>
                            <template slot-scope='scope'>
                                <div v-if="scope.row.roleLevel == '2-0'">会员(2-0)</div>
                                <div v-else-if="scope.row.roleLevel == '2-1741'">经理(2-1741)</div>
                                <div v-else-if="scope.row.roleLevel == '2-1742'">经销商(2-1742)</div>
                                <div v-else>{{scope.row.roleLevel}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="网体级别" prop='fttLevel'/>
                        <el-table-column label="邀请人ID" prop='referralParentUserId'/>
                        <el-table-column label="邀请码" prop='referralCode'/>
                        <el-table-column label="归属辅导员ID" prop='parentUserId'/>
                        <el-table-column label="中军卡" prop='cardzCellphone'/>
                        <el-table-column label="卡状态" prop='cardzState'>
                            <template slot-scope='scope'>
                                <div v-if="scope.row.cardzState == 'pending'">等待</div>
                                <div v-else-if="scope.row.cardzState == 'success'">成功</div>
                                <div v-else-if="scope.row.cardzState == 'failure'">失败</div>
                                <div v-else>{{scope.row.cardzState}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" prop='state'>
                            <template slot-scope='scope'>
                                <div v-if="scope.row.state == 'normal'">正常</div>
                                <div v-else-if="scope.row.state == 'muted'">禁言</div>
                                <div v-else-if="scope.row.state == 'banned'">禁止</div>
                                <div v-else>{{scope.row.state}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="创建时间" width='160px' prop='createdAt'>
                            <template slot-scope='scope'>
                                <div v-if="scope.row.createdAt">{{scope.row.createdAt.replace('T',' ').substring(0,16)}}</div>
                                <div v-else>-</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                            <template slot-scope='scope'>
                                <el-button size='mini' type='text' icon='el-icon-view'  @click='handleView(scope.row)' >查看</el-button>
                                <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)">
                                    <span class="el-dropdown-link">
                                        <i class="el-icon-d-arrow-right el-icon--right"></i>更多
                                    </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item command="handlecellphone" icon='el-icon-edit'>修改手机号</el-dropdown-item>
                                        <el-dropdown-item command="handleRolelevel" icon='el-icon-edit'>用户角色</el-dropdown-item>
                                        <el-dropdown-item command="handleFttlevel" icon='el-icon-edit'>网体级别</el-dropdown-item>
                                        <el-dropdown-item command="handleParents" icon='el-icon-edit'>归属辅导员</el-dropdown-item>
                                        <el-dropdown-item command="handleZjcard" icon='el-icon-edit'>绑定中军卡</el-dropdown-item>
                                        <el-dropdown-item command="handleState" icon='el-icon-edit'>修改状态</el-dropdown-item>
                                        <el-dropdown-item command="handleDel" icon='el-icon-edit'>删除用户</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </template>
                        </el-table-column>
                    </el-table>

                    <pagination  v-show="total>0" :total="total"  :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"  @pagination="getList" />
                </el-row>
            </el-row>
        </div>
        <!-- 查看详情 -->
        <el-dialog title="详细内容" :visible.sync="openView" width="960px" append-to-body>
            <el-form label-width="140px" size="mini">
                <el-row>
                    <el-col :span="12"><el-form-item label="用户ID：">{{viewForm.id}}</el-form-item></el-col>
                    <el-col :span="12"><el-form-item label="手机号：">{{viewForm.cellphone}}</el-form-item></el-col>
                </el-row>
                <el-row>
                    <el-col :span="12"><el-form-item label="姓名：">{{viewForm.idname}}</el-form-item></el-col>
                    <el-col :span="12"><el-form-item label="网体级别：">{{viewForm.fttLevel}}</el-form-item></el-col>
                </el-row>
                <el-row>
                    <el-col :span="12"><el-form-item label="角色：">{{viewForm.roleLevel}}</el-form-item></el-col>
                    <el-col :span="12"></el-col>
                </el-row>
                <el-row>
                    <el-col :span="12"><el-form-item label="状态：">
                        <div v-if="viewForm.state=='normal'">正常</div>
                        <div v-if="viewForm.state=='muted'">禁言</div>
                        <div v-if="viewForm.state=='banned'">禁止</div>
                    </el-form-item></el-col>
                    <el-col :span="12"><el-form-item label="备注：">{{viewForm.memo}}</el-form-item></el-col>
                </el-row>
                <hr>
                <el-row>
                    <el-col :span="12"><el-form-item label="邀请人ID：">{{viewForm.referralParentUserId}}</el-form-item></el-col>
                    <el-col :span="12"><el-form-item label="邀请码：">{{viewForm.referralCode}}</el-form-item></el-col>
                </el-row>
                <el-row>
                    <el-col :span="24"><el-form-item label="邀请人路径：">{{viewForm.referralParentUserIdPath}}</el-form-item></el-col>
                </el-row>
                <hr>
                <el-row>
                    
                    <el-col :span="12"><el-form-item label="归属辅导员ID：">{{viewForm.parentUserId}}</el-form-item></el-col>
                </el-row>
                <el-row>
                    <el-col :span="24"><el-form-item label="归属辅导员路径：">{{viewForm.parentUserIdPath}}</el-form-item></el-col>
                </el-row>
                <hr>
                <el-row>
                    <el-col :span="12"><el-form-item label="中军卡：">{{viewForm.cardzCellphone}}</el-form-item></el-col>
                    <el-col :span="12"><el-form-item label="卡状态：">{{viewForm.cardzState}}</el-form-item></el-col>
                </el-row>
                <el-row>
                    <el-col :span="24"><el-form-item label="创建时间：">{{viewForm.createdAt}}</el-form-item></el-col>
                </el-row>
            </el-form>
            <el-row>
                <Table :list='list2'  :tableColumns='tableColumns2'  ></Table>
                <pagination  v-show="total>0"  :total="total2" :page.sync="queryParams2.pageNo" :limit.sync="queryParams2.pageSize" @pagination="getAccountitemsHandler"  />
            </el-row>
        </el-dialog>
        
        <userForm :title="title" :titleFlag='titleFlag' :visible="addView" width="500px" 
            :userForm="userForm" :viewForm="viewForm" 
            @closeDialog="closeDialog" @submitFormChild="submitFormChild"  @userCancelChild="userCancelChild" ></userForm>
    </div>
</template>
<script>
import Table from '@/views/components/myTable'
import myForm from '@/views/components/myForm'
import userForm from '@/views/components/user/userForm'
import { getFttusersList,getFttusersID,postFttusers,putFttusersRolelevel,fttusersExport,putfttlevel,putZjcard,putParents,userListAPI,getAccountitems,putState,putCellphone,putUserDel } from '@/api/ka/ka'
export default {
    components:{
        Table,
        myForm,
        userForm
    },
    data() {
        return {
            loading:false,
            exportLoading:false,
            title:'',
            titleFlag:'',
            ruleForm:'ruleForm',
            openView:false,//详情
            addView:false,
            queryParams:{
                pageNo: 1,
                pageSize: 10,
            },
            viewForm:{},
            userId:'',
            userForm:{
                id:'',
                roleLevel:'',//角色
                fttLevel:'',//网体级别
            },
            list:[],
            total:0,
            queryParams:{
                pageNo: 1,
                pageSize: 10,
            },
            tableColumns2:[
                {label:'ID',param:'id'},
                {label:'名称',param:'name'},
                {label:'类目',param:'acctc',
                    render:row=>{
                        if(row.acctc == 'pinmoney'){
                            return '零钱'
                        }else if(row.acctc == 'referralProfit'){
                            return '推荐收益'
                        }else if(row.acctc == 'teamProfit'){
                            return '团队收益'
                        }else if(row.acctc == 'fttProfit'){
                            return '网体收益'
                        }else {
                            return row.acctc
                        }
                    }
                },
                {label:'交易额',param:'value',
                    render:row=>{
                        if(row.drcr == 'incr'){
                            return '+'+row.value
                        }else if(row.drcr == 'decr'){
                            return '-'+row.value
                        }else{
                            return row.value
                        }
                    }
                },
                {label:'对方用户ID',param:'anotherUserId'},
                {label:'关联类型',param:'relType',
                    render:row=>{
                        if(row.relType=='Withdraw'){
                            return '提现'
                        }else if(row.relType=='Order'){
                            return '订单'
                        }else if(row.relType=='FttProfit'){
                            return '分红'
                        }else if(row.relType=='FttWeekProfit'){
                            return '周分红'
                        }else{
                            return row.relType
                        }
                    }
                },
                {label:'创建时间',param:'createdAt',
                    render: row => {
                        if(!row.createdAt){
                            return '-'
                        }
                        return row.createdAt.replace('T',' ').substring(0,16)
                    }
                },

            ],
            list2:[],
            total2:0,
            queryParams2:{
                pageNo: 1,
                pageSize: 10,
            },
        }
    },
    created(){
        this.getList()
    },
    methods:{
        //关闭
        closeDialog(){
            this.addView = false
        },
        //取消
        userCancelChild(){
            this.closeDialog()
        },
        handleAdd(){
            this.title = '新增'
            this.titleFlag = '1'
            this.addView = true
            this.userForm = {}
        },
        handleEdit(val,num){
            if(num=='2'){
                this.title = '修改用户角色'
            }else if(num == '3'){
                this.title = '修改网体级别'
            }else if(num == '4'){
                this.title = '修改归属辅导员'
            }else if(num == '5'){
                this.title = '绑定中军卡'
            }else if(num == '6'){
                this.title = '修改手机号'
            }else if(num == '7'){
                this.title = '修改状态'
            }else if(num == '8'){
                this.title = '删除用户'
            }
            this.titleFlag = num
            this.addView = true
            this.viewForm = val
        },

        //提交
        submitFormChild(val){
            let data = {}
            data.id = this.viewForm.id
            switch(this.titleFlag){
                case '1':
                    data.cellphone=val.cellphone,
                    data.referralParentUserId=val.referralParentUserId
                    postFttusers(data).then(res=>{
                        if(res.code == 200){
                            this.handleSuccess("新增成功")
                        }
                    })
                    break;
                case '2':
                    data.roleLevel = val.roleLevel
                    putFttusersRolelevel(data).then(res=>{
                        if(res.code == 200){
                            this.handleSuccess("修改角色成功")
                        }
                    })
                    break;
                case '3':
                    data.fttLevel = val.fttLevel
                    putfttlevel(data).then(res=>{
                        if(res.code == 200){
                            this.handleSuccess("修改网体级别成功")
                        }
                    })
                    break;
                case '4':
                    data.parentUserId = val.parentUserId
                    putParents(data).then(res=>{
                        if(res.code == 200){
                            this.handleSuccess("修改归属辅导员成功")
                        }
                    })
                    break;
                case '5':
                    data.cardzCellphone = val.cardzCellphone
                    data.cardzState = val.cardzState
                    putZjcard(data).then(res=>{
                        if(res.code == 200){
                            this.handleSuccess("绑定中军卡成功")
                        }
                    })
                    break;
                case '6':
                   
                    data.cellphone = val.cellphone
                    putCellphone(data).then(res=>{
                        if(res.code == 200){
                            this.handleSuccess("手机号码修改成功")
                        }
                    })
                        
                    
                    
                    break;
                case '7':
                    data.state = val.state
                    data.memo = val.memo
                    putState(data).then(res=>{
                        if(res.code == 200){
                            this.handleSuccess("用户状态修改成功")
                        }
                    })
                    break;
                case '8':
                    if(this.viewForm.cellphone === val.cellphone){
                        this.$confirm("是否确认删除当前数据项?", "警告", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning"
                        }).then(() => {
                                putUserDel(data).then(res=>{
                                    if(res.code == 200){
                                        this.handleSuccess("当前用户删除成功")
                                    }
                                })
                        }).catch(() => {
                            this.msgSuccess("您已取消操作");
                        });
                    }else{
                        this.msgError('操作失败');
                    }
            }
        },
        handleSuccess(val){
            this.msgSuccess(val);
            this.closeDialog()
            this.getList()
        },
        //列表
        getList(){
            let data = this.addDateRange(this.queryParams)
            getFttusersList(data).then(res=>{
                
                if(res.data.code == 200){
                    this.list = res.data.rows
                    this.total = res.data.total
                }
            })
        },
        handleCommand(command,row){
            switch(command){
                case 'handleRolelevel': this.handleEdit(row,'2');
                    break;
                case 'handleFttlevel': this.handleEdit(row,'3');
                    break;
                case 'handleParents': this.handleEdit(row,'4');
                    break;
                case 'handleZjcard' : this.handleEdit(row,'5');
                    break;
                case 'handlecellphone' : this.handleEdit(row,'6');
                    break;
                case 'handleState' : this.handleEdit(row,'7');
                    break;
                case 'handleDel' : this.handleEdit(row,'8');
                    break;
                default:
                    break;
            }
        },
        //查看
        handleView(val){
            this.openView = true
            this.userId = val.userId
            getFttusersID({id:val.id}).then(res=>{
                if(res.code == 200){
                    this.viewForm = res.data
                    if(this.viewForm.cardzState == 'pending'){
                        this.viewForm.cardzState = '等待'
                    }else if(this.viewForm.cardzState == 'success'){
                        this.viewForm.cardzState = '成功'
                    }else if(this.viewForm.cardzState == 'failure'){
                        this.viewForm.cardzState = '失败'
                    }
                }
            })
            this.getAccountitemsHandler(val)
            
        },
        getAccountitemsHandler(row){
            this.queryParams2.userId = this.userId
            let data = this.addDateRange(this.queryParams2)
            getAccountitems(data).then(res=>{
                if(res.data.code == 200){
                    this.list2 = res.data.rows
                    this.total2 = res.data.total
                }
            })
        },
        //远程搜索
        handleSelect(val){
            this.queryParams.userId = val.userId
        },
        querySearchAsync(queryString,cb){
            clearTimeout(this.timeout)
            var restaurants = []
            this.timeout = setTimeout(()=>{
                let data = {
                    cellphone:queryString
                }
                userListAPI(data).then(res=>{
                    if(res.data.code == 200){
                        let results = res.data.rows
                        results.forEach(item=>{
                            restaurants.push({value:item.cellphone,userId:item.id})
                            cb(restaurants)
                        })
                    }
                })
            },1000*Math.random())
        },
        //清空搜索条件
        searchReset(){
            this.queryParams = {
                pageNo: 1,
                pageSize: 10,
                cellphone:'',
                cardzCellphone:'',
            }
        },
        //搜索
        handleQuery(obj){
            this.searchDelVal(obj)
            this.queryParams.pageNo = 1;
            this.getList();
        },
        //重置
        resetQuery(){
            this.resetForm("queryForm");
            this.searchReset()
            this.handleQuery()
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams;
            this.$confirm("是否确认导出用户数据项?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.exportLoading = true;
                return fttusersExport(queryParams);
            }).then(response => {
                this.download(response.msg);
                this.exportLoading = false;
            }).catch(() => {});
        },
        

    }
}
</script>
<style scoped>
.page {width:100%; height:auto; min-height:90vh; background: #eee; padding:20px;}
.part1_box {background:#fff; width:100%; margin-bottom:20px; border-radius: 20px;}
.part_title {font-size:30px; font-weight: bold; margin-top:20px; margin-left:20px; display: block; float:left;}
.part_dateDay { margin-top:30px; margin-left:20px;  display: block; float:left;}
.part1_list {height:146px; width:80%; 
background: linear-gradient(30deg, #2285FF 0%, #3BAEFF 100%); border-radius: 20px; margin-top:40px; color:#fff;}
.part1_list p {margin:0; padding:0; padding-top:20px; padding-left:40px;}
.part1_list p:nth-child(1) { font-size:24px;}
.part1_list p:nth-child(2) {font-size:50px;}
</style>
